<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snippai - AI驱动的智能截图工具</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .highlight {
            position: relative;
        }
        .highlight:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30%;
            background: rgba(102, 126, 234, 0.2);
            z-index: -1;
            transition: height 0.3s ease;
        }
        .highlight:hover:after {
            height: 50%;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Snippai<span class="text-yellow-300">.</span></h1>
                    <p class="text-xl mb-8 opacity-90">AI驱动的智能截图工具，让信息提取变得前所未有地简单</p>
                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                        <a href="https://github.com/xyTom/snippai" class="bg-white text-indigo-700 font-semibold px-6 py-3 rounded-lg shadow-lg hover:bg-gray-100 transition duration-300 flex items-center justify-center">
                            <i class="fab fa-github mr-2"></i> GitHub 项目
                        </a>
                        <a href="#features" class="bg-indigo-800 text-white font-semibold px-6 py-3 rounded-lg hover:bg-indigo-900 transition duration-300 flex items-center justify-center">
                            <i class="fas fa-star mr-2"></i> 核心功能
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1754967163684-1431e56e-6c0e-4fda-9210-cfafac679014.png" alt="Snippai 界面截图" class="rounded-lg shadow-2xl max-w-full h-auto border-4 border-white">
                </div>
            </div>
        </div>
    </section>

    <!-- Problem Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">它能解决什么问题？</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">用户在使用类似工具时常遇到这些痛点</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300">
                    <div class="flex items-center mb-4">
                        <div class="bg-indigo-100 p-3 rounded-full mr-4">
                            <i class="fas fa-square-root-alt text-indigo-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">复杂公式难以编辑</h3>
                    </div>
                    <p class="text-gray-700">截图里的数学公式无法快速转化为可编辑格式，需要手动重新输入。</p>
                </div>
                
                <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300">
                    <div class="flex items-center mb-4">
                        <div class="bg-purple-100 p-3 rounded-full mr-4">
                            <i class="fas fa-table text-purple-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">表格提取困难</h3>
                    </div>
                    <p class="text-gray-700">图片里的表格难以提取为结构化数据，影响数据分析效率。</p>
                </div>
                
                <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300">
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-100 p-3 rounded-full mr-4">
                            <i class="fas fa-keyboard text-blue-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">手动输入效率低</h3>
                    </div>
                    <p class="text-gray-700">需要手动输入文字或翻译内容，效率低下且容易出错。</p>
                </div>
                
                <div class="bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300">
                    <div class="flex items-center mb-4">
                        <div class="bg-green-100 p-3 rounded-full mr-4">
                            <i class="fas fa-palette text-green-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">无法读取设计元素</h3>
                    </div>
                    <p class="text-gray-700">不能直接读取代码、颜色、图像内容，影响后续工作流程。</p>
                </div>
            </div>
            
            <div class="mt-12 bg-indigo-50 border-l-4 border-indigo-500 p-6 rounded-r-lg">
                <p class="text-indigo-800 font-medium"><span class="text-xl font-bold">"</span> 这个工具就是来解决这些问题的：Snippai 利用 AI 自动识别截图内容，一键转化，极大提升效率、减少错误。<span class="text-xl font-bold">"</span></p>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-16 bg-gray-50">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">核心功能概述</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">Snippai 的主要功能，简洁突出实用性</p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="feature-card bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
                    <div class="flex items-center mb-4">
                        <div class="bg-indigo-500 text-white p-3 rounded-lg mr-4">
                            <i class="fas fa-square-root-alt text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">公式识别</h3>
                    </div>
                    <p class="text-gray-700 mb-4">从截图中提取数学公式并转为 LaTeX 格式，方便复制使用。</p>
                    <a href="https://github.com/xyTom/snippai" class="text-indigo-600 hover:text-indigo-800 font-medium inline-flex items-center">
                        了解更多 <i class="fas fa-arrow-right ml-1"></i>
                    </a>
                </div>
                
                <div class="feature-card bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-500 text-white p-3 rounded-lg mr-4">
                            <i class="fas fa-font text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">文本提取 (OCR)</h3>
                    </div>
                    <p class="text-gray-700 mb-4">精准识别图片中的文字内容，快速转为可编辑文本。</p>
                    <a href="https://github.com/xyTom/snippai" class="text-blue-600 hover:text-blue-800 font-medium inline-flex items-center">
                        了解更多 <i class="fas fa-arrow-right ml-1"></i>
                    </a>
                </div>
                
                <div class="feature-card bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
                    <div class="flex items-center mb-4">
                        <div class="bg-purple-500 text-white p-3 rounded-lg mr-4">
                            <i class="fas fa-table text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">表格转换</h3>
                    </div>
                    <p class="text-gray-700 mb-4">将截图中的表格转成 Markdown 表格格式，利于数据处理。</p>
                    <a href="https://github.com/xyTom/snippai" class="text-purple-600 hover:text-purple-800 font-medium inline-flex items-center">
                        了解更多 <i class="fas fa-arrow-right ml-1"></i>
                    </a>
                </div>
                
                <div class="feature-card bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
                    <div class="flex items-center mb-4">
                        <div class="bg-green-500 text-white p-3 rounded-lg mr-4">
                            <i class="fas fa-palette text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">图像内容分析 & 颜色检测</h3>
                    </div>
                    <p class="text-gray-700 mb-4">智能分析图片内容、识别主色调、提供设计参考。</p>
                    <a href="https://github.com/xyTom/snippai" class="text-green-600 hover:text-green-800 font-medium inline-flex items-center">
                        了解更多 <i class="fas fa-arrow-right ml-1"></i>
                    </a>
                </div>
                
                <div class="feature-card bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
                    <div class="flex items-center mb-4">
                        <div class="bg-red-500 text-white p-3 rounded-lg mr-4">
                            <i class="fas fa-code text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">代码理解 & 翻译</h3>
                    </div>
                    <p class="text-gray-700 mb-4">识别图里的代码片段并解释其作用；可以检测语言并提供实时翻译。</p>
                    <a href="https://github.com/xyTom/snippai" class="text-red-600 hover:text-red-800 font-medium inline-flex items-center">
                        了解更多 <i class="fas fa-arrow-right ml-1"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">使用场景</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">3个具体场景展示 Snippai 的应用价值</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-gradient-to-br from-indigo-50 to-blue-50 p-8 rounded-xl shadow-sm">
                    <div class="mb-6">
                        <div class="bg-indigo-600 text-white w-12 h-12 rounded-full flex items-center justify-center mb-4">
                            <i class="fas fa-graduation-cap text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3">教育/科研工作者</h3>
                        <p class="text-gray-700">课堂上有复杂公式，使用 Snippai 截图后快速转为 LaTeX，直接粘入报告或Slide，节省大量录入时间。</p>
                    </div>
                </div>
                
                <div class="bg-gradient-to-br from-purple-50 to-pink-50 p-8 rounded-xl shadow-sm">
                    <div class="mb-6">
                        <div class="bg-purple-600 text-white w-12 h-12 rounded-full flex items-center justify-center mb-4">
                            <i class="fas fa-paint-brush text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3">产品设计师/视觉分析</h3>
                        <p class="text-gray-700">从设计稿中识别颜色主调，自动提取关键颜色值供配色参考。</p>
                    </div>
                </div>
                
                <div class="bg-gradient-to-br from-blue-50 to-green-50 p-8 rounded-xl shadow-sm">
                    <div class="mb-6">
                        <div class="bg-blue-600 text-white w-12 h-12 rounded-full flex items-center justify-center mb-4">
                            <i class="fas fa-language text-xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold mb-3">跨语言工作/翻译需求</h3>
                        <p class="text-gray-700">遇到非本地语言文档或页面，截图后 Snippai 自动识别并翻译，快速理解内容。</p>
                    </div>
                </div>
            </div>
            
            <div class="mt-12 bg-yellow-50 border-l-4 border-yellow-500 p-6 rounded-r-lg">
                <p class="text-yellow-800 font-medium"><i class="fas fa-lightbulb mr-2"></i> <span class="highlight">你有没有在信息整理或内容复用中，碰到截图后难以提取的场景？Snippai 能否为你的工作流程提速？</span></p>
            </div>
        </div>
    </section>

    <!-- Advantages Section -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">优势与特色</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">与同类产品相比，Snippai 的独特之处</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-sm">
                    <div class="flex items-start mb-6">
                        <div class="bg-green-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-check-circle text-green-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">功能覆盖全面</h3>
                            <p class="text-gray-700">同时支持公式／表格／文字／翻译／代码／颜色分析，减少切换工具的繁琐。</p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-sm">
                    <div class="flex items-start mb-6">
                        <div class="bg-blue-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-lock-open text-blue-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">开源免费</h3>
                            <p class="text-gray-700">采用 AGPL-3.0 协议，代码公开透明。</p>
                            <a href="https://github.com/xyTom/snippai" class="text-blue-600 hover:text-blue-800 font-medium inline-flex items-center mt-2">
                                查看GitHub项目 <i class="fas fa-arrow-right ml-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-sm">
                    <div class="flex items-start mb-6">
                        <div class="bg-purple-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-desktop text-purple-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">跨平台支持</h3>
                            <p class="text-gray-700">兼容 macOS、Windows（未来也可能支持 Linux）。</p>
                            <a href="https://github.com/ruanyf/weekly/issues/7457" class="text-purple-600 hover:text-purple-800 font-medium inline-flex items-center mt-2">
                                了解更多 <i class="fas fa-arrow-right ml-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-sm">
                    <div class="flex items-start mb-6">
                        <div class="bg-red-100 p-3 rounded-lg mr-4">
                            <i class="fas fa-sync-alt text-red-600 text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold mb-2">持续迭代活跃</h3>
                            <p class="text-gray-700">最新版本 v0.2.0 于 <span class="font-bold">2025年7月1日</span> 发布，功能正在不断完善。</p>
                            <a href="https://github.com/xyTom/snippai/releases" class="text-red-600 hover:text-red-800 font-medium inline-flex items-center mt-2">
                                查看更新日志 <i class="fas fa-arrow-right ml-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Getting Started Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">上手指南</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">新手用户可以按照以下步骤快速开始</p>
            </div>
            
            <div class="bg-indigo-50 rounded-xl p-8 md:p-12">
                <div class="grid md:grid-cols-5 gap-8">
                    <div class="md:col-span-3">
                        <div class="flex items-start mb-8">
                            <div class="bg-indigo-600 text-white font-bold w-8 h-8 rounded-full flex items-center justify-center mr-4 flex-shrink-0">1</div>
                            <div>
                                <h3 class="text-xl font-semibold mb-2">访问项目主页</h3>
                                <p class="text-gray-700">打开 <a href="https://github.com/xyTom/snippai" class="text-indigo-600 hover:text-indigo-800 font-medium">https://github.com/xyTom/snippai</a> 查看最新版本。</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start mb-8">
                            <div class="bg-indigo-600 text-white font-bold w-8 h-8 rounded-full flex items-center justify-center mr-4 flex-shrink-0">2</div>
                            <div>
                                <h3 class="text-xl font-semibold mb-2">下载对应平台版本</h3>
                                <p class="text-gray-700">如 Windows/macOS 安装包；解压或安装。</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start mb-8">
                            <div class="bg-indigo-600 text-white font-bold w-8 h-8 rounded-full flex items-center justify-center mr-4 flex-shrink-0">3</div>
                            <div>
                                <h3 class="text-xl font-semibold mb-2">打开应用</h3>
                                <p class="text-gray-700">启动后使用快捷键（或工具栏按钮）进行截图。</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start mb-8">
                            <div class="bg-indigo-600 text-white font-bold w-8 h-8 rounded-full flex items-center justify-center mr-4 flex-shrink-0">4</div>
                            <div>
                                <h3 class="text-xl font-semibold mb-2">查看识别结果</h3>
                                <p class="text-gray-700">Snippet 会自动分析内容，并展示文本／LaTeX／Markdown／翻译等结果。</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="bg-indigo-600 text-white font-bold w-8 h-8 rounded-full flex items-center justify-center mr-4 flex-shrink-0">5</div>
                            <div>
                                <h3 class="text-xl font-semibold mb-2">替代方案（源码运行）</h3>
                                <p class="text-gray-700">若想编译自己版本，可 clone 仓库，执行 <code class="bg-indigo-100 text-indigo-800 px-2 py-1 rounded">npm i</code> → <code class="bg-indigo-100 text-indigo-800 px-2 py-1 rounded">npm start</code> 开启应用。</p>
                                <a href="https://github.com/xyTom/snippai/releases" class="text-indigo-600 hover:text-indigo-800 font-medium inline-flex items-center mt-2">
                                    查看发布页面 <i class="fas fa-arrow-right ml-1"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <div class="md:col-span-2">
                        <div class="bg-white p-6 rounded-lg shadow-md">
                            <h3 class="text-xl font-semibold mb-4 border-b pb-2">使用门槛与成本</h3>
                            <ul class="space-y-4">
                                <li class="flex items-start">
                                    <i class="fas fa-user-check text-green-500 mt-1 mr-3"></i>
                                    <div>
                                        <span class="font-semibold">注册：</span>
                                        <span>无需注册，开源项目可直接下载或从源代码构建。</span>
                                    </div>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-dollar-sign text-green-500 mt-1 mr-3"></i>
                                    <div>
                                        <span class="font-semibold">价格：</span>
                                        <span>完全免费，无高级付费版本。</span>
                                    </div>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-download text-green-500 mt-1 mr-3"></i>
                                    <div>
                                        <span class="font-semibold">版本与安装：</span>
                                        <span>支持 Windows 与 macOS 平台，有安装包可用；也可通过 Node.js 和 npm 从源码安装使用。</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Data Visualization -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">Snippai 工作流程可视化</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">从截图到最终输出的完整流程</p>
            </div>
            
            <div class="bg-white rounded-xl shadow-md p-8">
                <div class="mermaid">
                    graph TD
                    A[用户截图] --> B[AI内容识别]
                    B --> C1{内容类型?}
                    C1 -->|公式| D1[转换为LaTeX]
                    C1 -->|文本| D2[OCR提取]
                    C1 -->|表格| D3[转换为Markdown]
                    C1 -->|设计元素| D4[颜色分析]
                    C1 -->|代码| D5[代码解析]
                    D1 --> E[可编辑格式]
                    D2 --> E
                    D3 --> E
                    D4 --> E
                    D5 --> E
                    E --> F[用户使用]
                </div>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>